<!-- 权限管理-菜单管理 -->
<template>
    <!-- 显示权限列表 -->
    <el-table border :data="permissions" row-key="id">
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="权限值" prop="code"></el-table-column>
        <el-table-column label="修改时间" prop="updateTime"></el-table-column>
        <el-table-column label="操作" width="280px">
            <template #="{ row, $index }">
                <el-button type="primary" icon="Plus" size="small" :disabled="row.children.length == 0"
                    @click="AddPermission(row)" v-hasButton="'add'">
                    {{ row.level == 3 ? '添加功能' : '添加菜单' }}
                </el-button>
                <el-button type="warning" icon="Edit" size="small" :disabled="row.level == 1"
                    @click="EditPermission(row)" v-hasButton="'update'">编辑</el-button>
                <el-button type="danger" icon="Delete" size="small" :disabled="row.level == 1"
                    @click="deletePermission(row.id)" v-hasButton="'remove'">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 添加/编辑权限 -->
    <el-dialog :title="permissData.id ? '编辑' : '添加'" v-model="showEdit" width="480px">
        <template #default>
            <el-form ref="editform" :model="permissData" label-width="70px" :rules="rules">
                <el-form-item label="名称" prop="name">
                    <el-input style="width: 340px" placeholder="请输入名称" v-model.trim="permissData.name"></el-input>
                </el-form-item>
                <el-form-item label="权限值" prop="code">
                    <el-input style="width: 340px" placeholder="请输入权限值" v-model.trim="permissData.code"></el-input>
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <el-button type="primary" @click="confirmEdit">确定</el-button>
            <el-button @click="showEdit = false">取消</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reqAllPermission, reqAddOrUpdatePermission, reqDeletePermission } from '@/api/acl/permission'
import type { ResAllPermission, Permission, PermissionList } from '@/api/acl/permission/type'
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';

let permissions = ref<PermissionList>()
onMounted(() => {
    getPermissions();
})
// 获取菜单权限列表（发请求）
const getPermissions = async () => {
    let result: ResAllPermission = await reqAllPermission();
    if (result.code == 200) permissions.value = result.data
}
// 添加/编辑菜单
let permissData = ref<Permission>({ name: '', code: '', level: 1, pid: 1 })
// 显示输入框
let showEdit = ref<boolean>(false)
let editform = ref()
// 添加菜单权限
const AddPermission = (row: Permission) => {
    // level为下一级
    permissData.value = { name: '', code: '', level: row.level + 1, pid: row.id as number }
    // 显示输入框
    showEdit.value = true
    // 清空表单验证
    editform.value.clearValidate();

}
// 编辑菜单权限
const EditPermission = (row: Permission) => {
    // 解构数据，防止对表格数据产生响应式修改
    permissData.value = { ...row }
    // 显示输入框
    showEdit.value = true
    // 清空表单验证
    editform.value.clearValidate();
}
// 确认添加/修改权限（发请求）
const confirmEdit = async () => {
    await editform.value.validate();
    let result = await reqAddOrUpdatePermission(permissData.value);
    if (result.code == 200) {
        ElMessage.success(permissData.value.id ? '修改成功' : '添加成功')
        showEdit.value = false
        getPermissions();
    }
    else ElMessage.error(permissData.value.id ? '修改失败' : '添加失败')
}
// 表单校验规则
const rules = {
    name: [{ required: true, min: 2, max: 8, trigger: 'blur', message: '名称长度为2~8位' }],
    code: [{ required: true, min: 2, max: 10, trigger: 'blur', message: '权限值长度为2~10位' }]
}
// 删除权限
const deletePermission = async (id: number) => {
    let result:any = await reqDeletePermission(id);
    if (result.code == 200){
        ElMessage.success('删除成功')
        getPermissions();
    }
    else ElMessage.error('删除失败')
}
</script>

<style scoped lang="scss"></style>